import Cube from '../../../cssAnimation/Cube/Cube.jsx'

const Demo = () => {
	return <div className="note-example-box">
		<div className="note-example-intro">正方体展示</div>
		<div className="aninote-example-box">
			<Cube x={80} y={80} z={80}></Cube>
		</div>
		<div className="note-code-case">
			<textarea defaultValue={codeVal1} style={{height: '350px'}}></textarea>
			<textarea defaultValue={codeVal2} style={{height: '1180px'}}></textarea>
		</div>
	</div>;
}

const codeVal1 = `主组件
import Cube from '../../../cssAnimation/cube/Cube.jsx'

const Demo = () => {
	return <div className="note-example-box">
		<div className="note-example-intro">正方体展示</div>
		<div className="aninote-example-box">
			<Cube x={80} y={80} z={80}></Cube>
		</div>
		<div className="note-code-case">
			<textarea defaultValue={codeVal1} style={{height: '480px'}}></textarea>
			<textarea defaultValue={codeVal2} style={{height: '300px'}}></textarea>
		</div>
	</div>;
}`;
const codeVal2 = `Cube.jsx
const Cube = (props) => {
	const num = 100;
	const x1 = props.x || num;
	const y1 = props.y || num;
	const z1 = props.z || num;
	const x2 = x1 / 2;
	const y2 = y1 / 2;
	const z2 = z1 / 2;
	const style1 = {
		'width': '{x1}px',
		'height': '{y1}px',
	};
	const style2 = {
		item1: {
			transform: 'translateZ({z2}px)',
		},
		item2: {
			transform: 'translateZ(-{z2}px) rotateY(180deg)',
		},
		item3: {
			width: '{x1}px',
			height: '{z1}px',
			top: '{y2-z2}px',//为了让中间线也占在中央
			transform: 'translateY(-{y2}px) rotateX(90deg)',
		},
		item4: {
			width: '{x1}px',
			height: '{z1}px',
			top: '{y2-z2}px',//为了让中间线也占在中央
			transform: 'translateY({y2}px) rotateX(-90deg)',
		},
		item5: {
			width: '{z1}px',
			height: '{y1}px',
			left: '{x2-z2}px',//为了让中间线也占在中央
			transform: 'translateX(-{x2}px) rotateY(-90deg)',
		},
		item6: {
			width: '{z1}px',
			height: '{y1}px',
			left: '{x2-z2}px',//为了让中间线也占在中央
			transform: 'translateX({x2}px) rotateY(90deg)',
		},
	}
	return <div className="ani-cube" style={style1}>
		<div className="ani-cube-item ani-cube-item-1" style={style2.item1}>正面</div>
		<div className="ani-cube-item ani-cube-item-2" style={style2.item2}>背面</div>
		<div className="ani-cube-item ani-cube-item-3" style={style2.item3}>上方</div>
		<div className="ani-cube-item ani-cube-item-4" style={style2.item4}>下方</div>
		<div className="ani-cube-item ani-cube-item-5" style={style2.item5}>左侧</div>
		<div className="ani-cube-item ani-cube-item-6" style={style2.item6}>右侧</div>
	</div>;
}
`;

export default Demo
